<template>
  <div class="usercontiner" v-if="!recordshow">
    <div class="booktop">
      <div class="bookback" @click="backan"><van-icon name="arrow-left" /></div>
      <div class="bookname">个人资料</div>
    </div>
    <!-- 菜单栏目 -->
    <div class="usermentbox">
      <div class="usermentitem" @click="gose">
        <div class="usermentdes">头像</div>

        <div class="userimgs">
          <a-upload
            :custom-request="(option) => customRequest(option)"
            :fileList="file ? [file] : []"
            :show-file-list="false"
            @change="onChange"
            @progress="onProgress"
          >
            <template #upload-button>
              <div
                :class="`arco-upload-list-item${
                  file && file.status === 'error'
                    ? ' arco-upload-list-item-error'
                    : ''
                }`"
              >
                <div
                  class="arco-upload-list-picture custom-upload-avatar"
                  v-if="file && file.url"
                >
                  <img :src="file.url" class="imgsd" />
                  <IconEdit />
                </div>
                <div class="arimg" v-else>
                  <IconPlus />
                </div>
              </div>
            </template>
          </a-upload>
        </div>
      </div>
      <div class="usermentitem">
        <div class="usermentdes">姓名</div>
        <div class="usermentrght">{{ studentdata.studentName }}</div>
      </div>
      <div class="usermentitem">
        <div class="usermentdes">性别</div>
        <div class="usermentrght">{{ studentdata.sex }}</div>
      </div>

      <div class="usermentitem">
        <div class="usermentdes">班级</div>
        <div class="usermentrght">{{ studentdata.organizationName }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, onMounted, onBeforeUnmount } from 'vue';
  import { storeToRefs } from 'pinia';
  import { useUserStore } from '@/store';
  import { Pagination } from '@/types/global';
  import { showSuccessToast, showFailToast } from 'vant';
  import { updateInfo, uploadFile } from '@/api/user';

  const userStore = useUserStore();
  const userdata = storeToRefs(userStore);
  const studentId = ref(userdata.studentId.value);
  const studentdata = ref(userdata);
  console.log('目前的用户数据', studentdata.value);
  const base = ref((window as any).config.VUE_APP_IMG_API);
  import { useRouter, useRoute } from 'vue-router';
  import Record from './record.vue';
  const router = useRouter();
  const route = useRoute();

  const goupdate = () => {
    showSuccessToast('已是最新版');
  };
  const recordshow = ref(false);
  const record = ref(1);
  const goback = () => {
    recordshow.value = false;
  };
  const backan = () => {
    router.push({
      name: 'user',
    });
  };
  const file = ref();
  const files = ref();
  const onChange = (_, currentFile) => {
    file.value = {
      ...currentFile,
      // url: URL.createObjectURL(currentFile.file),
    };
  };
  const onProgress = (currentFile) => {
    file.value = currentFile;
    // console.log('currentFile', file.value);
  };

  const customRequest = (option: any) => {
    const { onProgress, onError, onSuccess, fileItem, name, handleRemove } =
      option;
    console.log('上传图像', fileItem.file);
    let formData = new FormData();

    formData.append('file', fileItem.file);
    uploadFile(formData)
      .then((res: any) => {
        if (res.code == 200) {
          onSuccess();
          console.log('图像上传成功', res.data);

          // 再次调用存进去

          updateInfo({
            headPortraitUrl: res.data,
          }).then((res: any) => {
            if (res.code == 200) {
            } else {
            }
          });
        }
      })
      .catch((err: any) => {
        onError(err);
      });
    return {
      abort: () => {
        console.log('上传已取消');
      },
    };
  };

  const gose = () => {
    // updateInfo({}).then((res: any) => {
    //   if (res.code == 200) {
    //   } else {
    //   }
    // });
    // let formData = new FormData();
    // //  file.value.fileItem.file
    // formData.append('file', '');
    // uploadFile(formData).then((res) => {
    //   if (res.code == 200) {
    //   }
    // });
  };
</script>

<style scoped>
  .imgsd {
    height: 80px;
    width: 80px;
    border-radius: 50%;
  }
  .arimg {
    overflow: hidden;

    text-align: center;
  }
  .userimgs {
  }
  .booktop {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
    font-size: 32px;
    color: #fff;
    position: relative;
    top: 0;
    left: 0;
  }
  .bookback {
    font-size: 36px;
    color: #fff;
    position: absolute;
    left: 20px;
  }
  .usercontiner {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #b9c7d6 0%, #fff 25%);
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 20px 47px;
  }
  .usermainbox {
    display: flex;
    margin: 20px auto;
    margin-top: 80px;
    align-items: center;
  }
  .userimg {
    width: 139px;
    height: 139px;
    border-radius: 50%;
    overflow: hidden;
  }
  .userimg img {
    width: 139px;
    height: 139px;
  }
  .userdesbox {
    display: flex;
    flex-direction: column;
    margin-left: 20px;
  }
  .username {
    font-size: 40px;
    color: #000;
    width: 450px;
    white-space: nowrap; /* 禁止换行 */
    overflow: hidden; /* 超出隐藏 */
    text-overflow: ellipsis; /* 显示省略号 */
  }
  .userdes {
    font-size: 32px;
    color: #666666;
    margin: 10px 0;
  }
  .userment {
    font-size: 40px;
    color: #666666;
  }
  .stubox {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
  .stuimgitem {
    width: 320px;
    height: 125px;
    overflow: hidden;
  }
  .stuimgitem img {
    width: 320px;
    height: 125px;
    overflow: hidden;
  }
  .usermentbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
  }
  .usermentitem {
    height: 102px;
    width: 100%;
    display: flex;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  .usermenticon {
    width: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .usermentdes {
    width: 592px;
    border-radius: 0px 0px 0px 0px;

    font-size: 28px;
    color: #666666;
    display: flex;
    align-items: center;
  }
  .usermenticon img {
    width: 39px;
    height: 37px;
  }
  .usermenticon2 img {
    width: 28px;
    height: 36px;
  }
  .usermenticon3 img {
    width: 38px;
    height: 38px;
  }
  .usermentrght {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #666666;
    width: 150px;
    /* 关键部分 */
    overflow: hidden; /* 隐藏溢出内容 */
    text-overflow: ellipsis; /* 添加省略号 */
    white-space: nowrap; /* 强制文本不换行 */
  }
</style>
